

const fdj = src => {

    
    var oBox = document.querySelector('.box');
    const oLeftImg = oBox.querySelector('img');
    var oA = document.querySelector('.a');

    var oRight = document.querySelector('.right');
    var oRightImg = document.querySelector('.right img');


    // 给图片添加路径
    oLeftImg.src = src ;
    oRightImg.src = src ;



    // 获取元素的相关尺寸需要消耗性能    move事件是一个高频率事件
    var r = oA.offsetWidth / 2;

    var maxWidth = oBox.clientWidth - oA.offsetWidth;
    var maxHeight = oBox.clientHeight - oA.offsetHeight;


    // 放大镜的移动比例 = 大图的移动范围 / 小图的移动范围
    var bigMaxWidth = oRightImg.clientWidth - oRight.offsetWidth;

    var scale = bigMaxWidth / maxWidth;

    // 鼠标移入移出
    oBox.addEventListener('mouseover', function () {
        oA.style.visibility = 'visible';
        oRight.style.visibility = 'visible';
    })
    oBox.addEventListener('mouseout', function () {
        oA.style.visibility = 'hidden';
        oRight.style.visibility = 'hidden';
    })

    document.onmousemove = function (e) {
        e = e || event;
        var x = e.offsetX - r ;
        var y = e.offsetY - r ;
        if (x < 0) x = 0;
        if (y < 0) y = 0;
        if (x > maxWidth) x = maxWidth;
        if (y > maxHeight) y = maxHeight;
        oA.style.left = x + 'px';
        oA.style.top = y + 'px';

        // 图片反向移动
        oRightImg.style.left = -x * scale + 'px';
        oRightImg.style.top = -y * scale + 'px';
    }
}